
import React, { Component } from 'react'
import { Card, List} from 'antd';
import {ArrowLeftOutlined} from '@ant-design/icons'
import {GetClass} from '../../../reudx/action'
import {imgPort} from '../../../const_state/port'

import './all.less'

const Item = List.Item

export default class Detail extends Component {
    state = {
        cateName:'',//所属分分类名
        pcateName:'',//父分类的名字
    }
    async componentDidMount(){
        //发送请求获取分类的名字
        let {categoryId,pCategoryId}  =  this.props.location.state
        let test = await GetClass({categoryId,pCategoryId})
        //console.log("这是test",test)
        this.setState({cateName:test[0].data.data.name,pcateName:test[1].data.data.name})
        
    }
    render() {
        const {_id,desc,price,name,imgs,detail} = this.props.location.state
        console.log("这时home传过来的img",imgs)
        const title = (
            <span>
            <ArrowLeftOutlined style ={{fontSize:'20px'}} onClick = {()=>this.props.history.goBack()}/>
            <span style ={{color:'green',fontSize:'20px',marginLeft:'30px'}}>商品详情</span>
            </span>
        )
        return (
            <Card title={title} >
              <List> 
                <Item>
                    <div className="item-container">
                        <span className="left-title">商品名称：</span>
                        <span>{name}</span>
                    </div>
                </Item>
                <Item>
                    <div className="item-container">
                        <span className="left-title">商品描述：</span>
                        <span>{desc}</span>
                    </div>
                </Item>
                <Item>
                    <div className="item-container">
                        <span className="left-title">商品价格：</span>
                        <span>{price}元</span>
                    </div>
                </Item>
                <Item>
                    <div className="item-container">
                        <span className="left-title">所属分类：</span>
                        <span>{this.state.pcateName}---{'>'}{this.state.cateName}</span>
                    </div>
                </Item>
                <Item>
                    <div className="item-container">
                    <span className="left-title">商品图片：</span>
                    {

                        imgs.map((img)=><img className = "produce-pic" src={imgPort+img} alt=""/>)
                    }
                    </div>
                </Item>
                <Item>
                    <div className="item-container">
                        <span className="left-title">商品详情：</span>
                        <span >{detail}</span>
                    </div>
                </Item>
              </List>
            </Card>
        )
    }
}